<template>
  <div>
    <ZgDialog width="60%" v-model="visible" :title="dialogTitle" @ok="onOk">
      <div class="flx-b content">
        <div class="width100">
          <ZgInput placeholder="请输入关键字" v-model="searchForm.searchStr" @enter="search" />
          <h3 class="mt10">{{ title }}</h3>
          <ul>
            <li v-show="isShowAllChoose">
              <span>
                <a-checkbox :indeterminate="indeterminate" :checked="allChecked" @change="changeAllChecked">
                  全选
                </a-checkbox>
              </span>
            </li>

            <li class="personnel" v-for="(item,index) in list" :key="index">
              <span>
                <ZgCheckbox :modelVal="item.isChecked" @change="v => chooseSingle(item,v)"></ZgCheckbox>
                <svg
                  t="1750387781688"
                  class="icon mrg10"
                  viewBox="0 0 1036 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6248"
                  width="32"
                  height="32"><path d="M231.633593 295.165243c0-153.595317 124.940454-278.535771 278.537807-278.535771 153.595317 0 278.535771 124.940454 278.535771 278.535771 0 153.60448-124.940454 278.53068-278.535771 278.53068C356.574047 573.695923 231.633593 448.769723 231.633593 295.165243L231.633593 295.165243zM0 1014.090329c5.996914-67.351756 38.330358-306.001432 286.846943-433.813074 61.63687 48.382571 139.069346 77.514946 223.325474 77.514946 84.715315 0 162.56727-29.428658 224.36908-78.30605 249.591753 127.274058 279.721917 364.250911 285.801301 434.597051C1018.86037 1015.51676 1.473266 1014.201308 0 1014.090329L0 1014.090329zM0 1014.090329" fill="#59ADF8" p-id="6249"></path></svg>
                <span>
                  {{ item.name }}
                </span>
              </span>
            </li>

          </ul>
        </div>
        <div class="divider"></div>
        <div class="width100">
          <div>已选择（{{ chooseform.selected.length }}/{{ chooseform.total }}）</div>
          <ul class="selected-list">
            <span class="mr10" v-for="(item,index) in chooseform.selected" :key="index" @click="delChoose(item)">
              <i>{{ item.name }}</i><i class="fa fa-close"></i>
            </span>
          </ul>
        </div>
      </div>

    </ZgDialog>
  </div>
</template>

<script>

export default {
  props: {
    dialogTitle: {
      type: String,
      default: '选择人员'
    },

    title: {
      type: String,
      default: '焦煤交易中心'
    },
    searchForm: {
      type: Object,
      default: () => {
        return {
          searchStr: '',
          userIds: []
        }
      }
    },
    selceted: {
      type: Array,
      default: () => {
        return []
      }
    },
    isRequired: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {
      visible: false,
      chooseform: {
        total: 100,
        selected: [],
        userList: []
      },
      isShowAllChoose: false,
      allChecked: false,
      indeterminate: false,
      list: []
    }
  },
  watch: {

    list (val) {
      this.chooseform.selected.map(item => {
        val.map(ele => {
          if (item.id === ele.id) {
            ele.isChecked = true
          }
        })
      })
    }
  },
  methods: {
    // 全选
    changeAllChecked (e) {
      const value = e.target.checked
      this.list.map(item => {
        if (!item.isOrg && value) {
          item.isChecked = value
          if (!this.chooseform.selected.some(ele => ele.id === item.id)) {
            this.chooseform.selected.push(item)
          }
        }
        if (!item.isOrg && !value) {
          item.isChecked = value
          this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
        }
      })
    },
    // 单选
    chooseSingle (item, v) {
      if (v) {
        if (!this.chooseform.selected.some(ele => ele.id === item.id)) {
          this.chooseform.selected.push(item)
        }
      } else {
        this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
      }
      this.list.map(ele => {
        if (ele.id === item.id) {
          ele.isChecked = v
        }
      })
      const checkedLength = this.list.filter(ele => {
        return !ele.isOrg && ele.isChecked === true
      }).length

      switch (checkedLength) {
        case 0:
          this.allChecked = false
          this.indeterminate = false
          break
        case this.chooseform.userList.length:
          this.allChecked = true
          this.indeterminate = false
          break
        default:
          this.allChecked = false
          this.indeterminate = true
      }
    },

    // 删除选中的人员
    delChoose (item) {
      this.list.map(ele => {
        if (ele.id === item.id) {
          ele.isChecked = false
        }
      })
      this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
    },

    onOk () {
      console.log(this.chooseform.selected)
      if (this.isRequired) {
        if (this.chooseform.selected.length === 0) {
          this.$warning({ title: '请选择人员' })
          return
        }
      }
      this.visible = false
      this.$emit('onOk', this.chooseform.selected)
    },
    // 获取 人员列表
    getlistUser () {
      this.$http.post('/zg-system/user/list', this.searchForm, data => {
        const userList = data.map(item => {
          // 查看 selected 是否包含此id
          if (this.searchForm.selected.some(ele => ele === item.id)) {
            item.isChecked = true
            this.chooseform.selected.push(item)
          } else {
            item.isChecked = false
          }
          return {
            ...item,
            isOrg: false,
            disabled: false
          }
        })
        this.list = userList
        this.chooseform.total = userList.length
        this.isShowAllChoose = userList.length > 0
        this.chooseform.userList = userList
      })
    },
    search () {
      this.getlistUser()
    },
    open (searchForm) {
      this.getlistUser()
      // this.chooseform.selected = this.selceted
      this.visible = true
    }
  },
  mounted () {

  }

}
</script>

<style scoped lang="scss">
.content{
  height:400px;
}
.width100{
  width: 100%;
  height:100%;
  h3{
    text-align: center;
  }
  ul{
    height:calc(100% - 100px);
    overflow-y: auto;

    li{
      height:40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      padding:10px;
      cursor: pointer;
      span{
        display: flex;
        align-items: center;
        i{
          color:#1890ff;
        }
      }
      span:nth-child(1){
        width:calc(100% - 50px);
      }

    }
    li:hover{
      background:#fcf6f6;
      border-radius: 10px;
    }

  }

}
.selected-list{
  padding:10px 0px;
  span{
    height:30px;
    line-height: 30px;
    padding:3px;
    border-radius: 5px;
    background:#1890ff;
    color:#fff;
    cursor: pointer;
    i{
      margin:0px 5px 0px 5px;
    }
  }
}
.mrg10{
  margin:0px 10px 0px 10px;
}
.divider{
  width:1px;
  height:100%;
  background:#fcf6f6;
  margin: 0px 10px 0px 10px;
}
</style>
